<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务详情 - TodoList</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="miniprogram-container">
        <div class="page">
            <!-- 头部导航 -->
            <header class="header">
                <div class="flex flex-between">
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="goBack()">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <div>
                            <h1 class="header-title">⚡ 任务详情</h1>
                            <p class="header-subtitle">TASK DETAILS</p>
                        </div>
                    </div>
                    <div class="flex" style="gap: 8px;">
                        <button class="btn btn-secondary" onclick="toggleFavorite()">
                            <i class="fas fa-star" id="favoriteIcon"></i>
                        </button>
                        <button class="btn btn-secondary" onclick="shareTask()">
                            <i class="fas fa-share"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 任务状态栏 -->
            <div class="card card-glow-blue" style="margin: 16px; padding: 16px;">
                <div class="flex flex-between" style="margin-bottom: 12px;">
                    <h3 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🔥 TASK STATUS</h3>
                    <div class="toggle-switch active" onclick="toggleTaskStatus()">
                        <div class="toggle-thumb"></div>
                    </div>
                </div>
                <div class="flex" style="gap: 16px; font-size: 12px; color: var(--text-secondary);">
                    <div><i class="fas fa-calendar" style="margin-right: 4px;"></i>创建：2024-01-15 14:30</div>
                    <div><i class="fas fa-clock" style="margin-right: 4px;"></i>更新：2024-01-15 16:45</div>
                </div>
            </div>

            <!-- 表单内容 -->
            <div class="flex-1" style="overflow-y: auto; padding-bottom: 100px;">
                <!-- 任务基本信息 -->
                <div class="card">
                    <div class="input-group">
                        <label class="input-label">🔥 TASK TITLE</label>
                        <input type="text" class="input-field" id="taskTitle" value="完成项目报告" placeholder="输入任务标题...">
                    </div>
                    
                    <div class="input-group">
                        <label class="input-label">📝 DESCRIPTION</label>
                        <textarea class="input-field textarea-field" id="taskNote" placeholder="添加任务描述...">需要整理数据和制作图表展示，包含用户反馈分析和性能优化建议，预计需要3-4小时完成。

主要内容包括：
1. 数据收集和整理
2. 图表制作和可视化
3. 用户反馈分析
4. 性能优化建议
5. 最终报告撰写</textarea>
                    </div>
                </div>

                <!-- 优先级设置 -->
                <div class="card card-glow-red">
                    <div class="input-group mb-0">
                        <label class="input-label">⚡ PRIORITY LEVEL</label>
                        <div class="flex" style="gap: 12px; flex-wrap: wrap;">
                            <button class="btn btn-danger priority-btn active" data-priority="high">
                                <i class="fas fa-fire" style="margin-right: 8px;"></i>HIGH
                            </button>
                            <button class="btn btn-secondary priority-btn" data-priority="medium">
                                <i class="fas fa-star" style="margin-right: 8px;"></i>MEDIUM
                            </button>
                            <button class="btn btn-secondary priority-btn" data-priority="low">
                                <i class="fas fa-circle" style="margin-right: 8px;"></i>LOW
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 任务分类 -->
                <div class="card card-glow-orange">
                    <div class="input-group mb-0">
                        <label class="input-label">🏷️ CATEGORY</label>
                        <div class="flex" style="gap: 8px; flex-wrap: wrap;">
                            <button class="btn btn-secondary category-btn active" data-category="work">
                                <i class="fas fa-briefcase" style="margin-right: 6px;"></i>工作
                            </button>
                            <button class="btn btn-secondary category-btn" data-category="personal">
                                <i class="fas fa-user" style="margin-right: 6px;"></i>个人
                            </button>
                            <button class="btn btn-secondary category-btn" data-category="study">
                                <i class="fas fa-book" style="margin-right: 6px;"></i>学习
                            </button>
                            <button class="btn btn-secondary category-btn" data-category="health">
                                <i class="fas fa-heart" style="margin-right: 6px;"></i>健康
                            </button>
                            <button class="btn btn-secondary category-btn" data-category="other">
                                <i class="fas fa-tag" style="margin-right: 6px;"></i>其他
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 时间设置 -->
                <div class="card card-glow-green">
                    <div class="input-group">
                        <label class="input-label">⏰ DEADLINE</label>
                        <input type="datetime-local" class="input-field" id="taskDeadline" value="2024-01-20T18:00">
                    </div>
                    
                    <div class="input-group mb-0">
                        <label class="input-label">⏱️ ESTIMATED TIME</label>
                        <div class="flex" style="gap: 12px;">
                            <input type="number" class="input-field" id="estimatedHours" value="3" min="0" max="23" style="flex: 1;" placeholder="小时">
                            <input type="number" class="input-field" id="estimatedMinutes" value="30" min="0" max="59" style="flex: 1;" placeholder="分钟">
                        </div>
                    </div>
                </div>

                <!-- 子任务 -->
                <div class="card">
                    <div class="flex flex-between" style="margin-bottom: 16px;">
                        <label class="input-label" style="margin: 0;">📋 SUBTASKS</label>
                        <button class="btn btn-primary" onclick="addSubtask()" style="padding: 6px 12px; font-size: 12px;">
                            <i class="fas fa-plus" style="margin-right: 4px;"></i>添加
                        </button>
                    </div>
                    
                    <div id="subtaskList">
                        <div class="subtask-item" style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary);">
                            <div class="toggle-switch" style="width: 40px; height: 20px;" onclick="toggleSubtask(this)">
                                <div class="toggle-thumb" style="width: 16px; height: 16px; top: 2px; left: 2px;"></div>
                            </div>
                            <input type="text" class="input-field" value="数据收集和整理" style="flex: 1; padding: 8px 12px; margin: 0; font-size: 14px;">
                            <button class="btn btn-danger" onclick="removeSubtask(this)" style="padding: 6px; font-size: 12px;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        
                        <div class="subtask-item" style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary);">
                            <div class="toggle-switch active" style="width: 40px; height: 20px;" onclick="toggleSubtask(this)">
                                <div class="toggle-thumb" style="width: 16px; height: 16px; top: 2px; left: 20px;"></div>
                            </div>
                            <input type="text" class="input-field" value="图表制作和可视化" style="flex: 1; padding: 8px 12px; margin: 0; font-size: 14px; text-decoration: line-through; opacity: 0.6;">
                            <button class="btn btn-danger" onclick="removeSubtask(this)" style="padding: 6px; font-size: 12px;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        
                        <div class="subtask-item" style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary);">
                            <div class="toggle-switch" style="width: 40px; height: 20px;" onclick="toggleSubtask(this)">
                                <div class="toggle-thumb" style="width: 16px; height: 16px; top: 2px; left: 2px;"></div>
                            </div>
                            <input type="text" class="input-field" value="用户反馈分析" style="flex: 1; padding: 8px 12px; margin: 0; font-size: 14px;">
                            <button class="btn btn-danger" onclick="removeSubtask(this)" style="padding: 6px; font-size: 12px;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 附件和标签 -->
                <div class="card">
                    <div class="input-group">
                        <label class="input-label">📎 ATTACHMENTS</label>
                        <div class="flex" style="gap: 8px; flex-wrap: wrap; margin-bottom: 12px;">
                            <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary); font-size: 12px;">
                                <i class="fas fa-file-pdf" style="color: var(--accent-red);"></i>
                                <span>项目需求文档.pdf</span>
                                <button class="btn btn-danger" style="padding: 2px 6px; font-size: 10px;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary); font-size: 12px;">
                                <i class="fas fa-file-excel" style="color: var(--accent-green);"></i>
                                <span>数据表格.xlsx</span>
                                <button class="btn btn-danger" style="padding: 2px 6px; font-size: 10px;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <button class="btn btn-secondary" onclick="addAttachment()" style="width: 100%;">
                            <i class="fas fa-paperclip" style="margin-right: 8px;"></i>添加附件
                        </button>
                    </div>
                    
                    <div class="input-group mb-0">
                        <label class="input-label">🏷️ TAGS</label>
                        <div class="flex" style="gap: 6px; flex-wrap: wrap; margin-bottom: 12px;">
                            <span class="priority-badge priority-high" style="font-size: 10px;">重要</span>
                            <span class="priority-badge priority-medium" style="font-size: 10px;">工作</span>
                            <span class="priority-badge priority-low" style="font-size: 10px;">报告</span>
                        </div>
                        <input type="text" class="input-field" placeholder="添加标签..." id="tagInput" onkeypress="handleTagInput(event)">
                    </div>
                </div>
            </div>

            <!-- 底部操作按钮 -->
            <div style="padding: 16px; background: var(--bg-primary); border-top: var(--border-primary); display: flex; gap: 12px;">
                <button class="btn btn-primary" onclick="saveTask()" style="flex: 1;">
                    <i class="fas fa-save" style="margin-right: 8px;"></i>保存修改
                </button>
                <button class="btn btn-danger" onclick="deleteTask()" style="flex: 1;">
                    <i class="fas fa-trash" style="margin-right: 8px;"></i>删除任务
                </button>
            </div>
        </div>
    </div>

    <script>
        // 返回上一页
        function goBack() {
            console.log('返回上一页');
            // 这里可以实现页面返回逻辑
        }

        // 切换收藏状态
        function toggleFavorite() {
            const icon = document.getElementById('favoriteIcon');
            if (icon.classList.contains('fas')) {
                icon.classList.remove('fas');
                icon.classList.add('far');
            } else {
                icon.classList.remove('far');
                icon.classList.add('fas');
            }
        }

        // 分享任务
        function shareTask() {
            console.log('分享任务');
            // 这里可以实现分享功能
        }

        // 切换任务完成状态
        function toggleTaskStatus() {
            const toggle = document.querySelector('.toggle-switch');
            toggle.classList.toggle('active');
        }

        // 优先级选择
        document.querySelectorAll('.priority-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的激活状态
                document.querySelectorAll('.priority-btn').forEach(b => {
                    b.classList.remove('btn-danger', 'active');
                    b.classList.add('btn-secondary');
                });
                
                // 激活当前按钮
                this.classList.remove('btn-secondary');
                this.classList.add('btn-danger', 'active');
            });
        });

        // 分类选择
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的激活状态
                document.querySelectorAll('.category-btn').forEach(b => {
                    b.classList.remove('btn-primary', 'active');
                    b.classList.add('btn-secondary');
                });
                
                // 激活当前按钮
                this.classList.remove('btn-secondary');
                this.classList.add('btn-primary', 'active');
            });
        });

        // 添加子任务
        function addSubtask() {
            const subtaskList = document.getElementById('subtaskList');
            const newSubtask = document.createElement('div');
            newSubtask.className = 'subtask-item';
            newSubtask.style.cssText = 'display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary);';
            newSubtask.innerHTML = `
                <div class="toggle-switch" style="width: 40px; height: 20px;" onclick="toggleSubtask(this)">
                    <div class="toggle-thumb" style="width: 16px; height: 16px; top: 2px; left: 2px;"></div>
                </div>
                <input type="text" class="input-field" placeholder="输入子任务..." style="flex: 1; padding: 8px 12px; margin: 0; font-size: 14px;">
                <button class="btn btn-danger" onclick="removeSubtask(this)" style="padding: 6px; font-size: 12px;">
                    <i class="fas fa-trash"></i>
                </button>
            `;
            subtaskList.appendChild(newSubtask);
            
            // 聚焦到新的输入框
            newSubtask.querySelector('input').focus();
        }

        // 切换子任务状态
        function toggleSubtask(toggle) {
            const input = toggle.parentElement.querySelector('input');
            const thumb = toggle.querySelector('.toggle-thumb');
            
            if (toggle.classList.contains('active')) {
                toggle.classList.remove('active');
                thumb.style.left = '2px';
                input.style.textDecoration = 'none';
                input.style.opacity = '1';
            } else {
                toggle.classList.add('active');
                thumb.style.left = '20px';
                input.style.textDecoration = 'line-through';
                input.style.opacity = '0.6';
            }
        }

        // 删除子任务
        function removeSubtask(btn) {
            btn.parentElement.remove();
        }

        // 添加附件
        function addAttachment() {
            console.log('添加附件');
            // 这里可以实现文件选择功能
        }

        // 处理标签输入
        function handleTagInput(event) {
            if (event.key === 'Enter') {
                const input = event.target;
                const tagText = input.value.trim();
                
                if (tagText) {
                    // 创建新标签
                    const tagContainer = input.parentElement.querySelector('div');
                    const newTag = document.createElement('span');
                    newTag.className = 'priority-badge priority-low';
                    newTag.style.fontSize = '10px';
                    newTag.textContent = tagText;
                    
                    // 添加删除按钮
                    newTag.onclick = function() {
                        this.remove();
                    };
                    
                    tagContainer.appendChild(newTag);
                    input.value = '';
                }
            }
        }

        // 保存任务
        function saveTask() {
            const taskData = {
                title: document.getElementById('taskTitle').value,
                note: document.getElementById('taskNote').value,
                deadline: document.getElementById('taskDeadline').value,
                estimatedHours: document.getElementById('estimatedHours').value,
                estimatedMinutes: document.getElementById('estimatedMinutes').value,
                priority: document.querySelector('.priority-btn.active')?.dataset.priority,
                category: document.querySelector('.category-btn.active')?.dataset.category,
                isCompleted: document.querySelector('.toggle-switch').classList.contains('active')
            };
            
            console.log('保存任务数据:', taskData);
            
            // 显示保存成功提示
            showToast('任务保存成功！', 'success');
        }

        // 删除任务
        function deleteTask() {
            if (confirm('确定要删除这个任务吗？此操作不可恢复。')) {
                console.log('删除任务');
                showToast('任务已删除', 'danger');
                // 这里可以实现删除逻辑
            }
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: ${type === 'success' ? 'var(--accent-green)' : 'var(--accent-red)'};
                color: white;
                padding: 12px 24px;
                border-radius: var(--radius-md);
                font-size: 14px;
                font-weight: 600;
                z-index: 10000;
                box-shadow: 0 0 30px ${type === 'success' ? 'var(--accent-green-glow)' : 'var(--accent-red-glow)'};
            `;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加输入框焦点效果
            const inputs = document.querySelectorAll('.input-field');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('card-glow-blue');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('card-glow-blue');
                });
            });
        });
    </script>
</body>
</html> 